<template>
    <transition appear name="list-fade">
        <div class="playlist" v-show="showFlag" @click="hide">
            <div class="list-wrapper" @click.stop="">
                <div class="list-header">
                    <h1 class="title">
                        <i class="icon iconfont"
                           :class="iconMode"
                           @click="changeMode"
                        >
                        </i>
                        <span class="text"
                              @click="changeMode"
                        >
                            {{modeText}}
                        </span>
                        <span class="clear" @click="showConfirm">
                            <i class="iconfont icon-trash"></i>
                        </span>
                    </h1>
                </div>
                <scroll
                    class="list-content"
                    :data="sequenceList"
                    ref="list"
                >
                    <transition-group name="list" tag="ul">
                        <li class="item"
                            v-for="(item, index) in sequenceList"
                            :key="item.id"
                            @click="selectItem(item, index)"
                            ref="item"
                        >
                            <div class="desc"
                                 :class="getCurrentIcon(item)">
                                <div class="text">
                                    <span class="song-name">{{item.name}}</span>
                                    <span class="singer-name"> - {{item.singer}}</span>
                                </div>
                                <div class="icon">
                                    <i class="current iconfont icon-volume"></i>
                                </div>
                            </div>
                            <div class="option">
                                <span class="option-item favorite">
                                    <i class="iconfont"
                                        :class="favoriteCls(item)"
                                        @click.stop="addFavorite(item)"
                                    ></i>
                                </span>
                                <span class="option-item delete" @click.stop="deleteOne(item)">
                                    <i class="iconfont icon-cross"></i>
                                </span>
                            </div>
                        </li>
                    </transition-group>
                </scroll>
                <div class="list-close" @click="hide">
                    <span>关闭</span>
                </div>
            </div>
            <confirm ref="confirm"
                     @confirm="confirmClear"
                     text="确定清空所有歌曲？"
                     confirmBtnText="确定"
            >
            </confirm>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
    import { mapActions, mapGetters } from 'vuex'
    import Scroll from 'base/scroll/scroll'
    import { REFRESH_TIME, playMode } from 'common/js/config'
    import Confirm from 'base/confirm/confirm'
    import PlayerMixin from 'common/mixins/player'

    export default {
        mixins: [PlayerMixin],
        props: {
            showFlag: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            modeText() {
                let result = ''
                switch (this.mode) {
                    case playMode.sequence:
                        result = `顺序播放(${this.sequenceList.length}首)`
                        break
                    case playMode.random:
                        result = `随机播放(${this.sequenceList.length}首)`
                        break
                    case playMode.loop:
                        result = `单曲循环`
                        break
                }
                return result
            },
            ...mapGetters([
                'favoriteList'
            ])
        },
        methods: {
            hide() {
                this.$emit('hide')
            },
            getCurrentIcon(item) {
                if (this.currentSong.id === item.id) {
                    return 'playing'
                }
                return ''
            },
            showConfirm() {
                this.$refs.confirm.show()
            },
            confirmClear() {
                this.clearSongList()
                this.hide()
            },
            selectItem(item, index) {
                if (this.mode === playMode.random) {
                    index = this.playList.findIndex((song) => {
                        return song.id === item.id
                    })
                }
                this.setCurrentIndex(index)
                this.setPlaying(true)
            },
            scrollToCurrent(current) {
                const index = this.sequenceList.findIndex((song) => {
                    return current.id === song.id
                })
                this.$refs.list.scrollToElement(this.$refs.item[index])
            },
            // 不能通过给song添加isFavorite解决
            // 因为歌曲数据是从腾讯获取
            isFavorite(id) {
                const index = this.favoriteList.findIndex(item => {
                    return id === item.id
                })
                return index > -1
            },
            favoriteCls(item) {
                return this.isFavorite(item.id) ? 'icon-full-heart' : 'icon-heart'
            },
            addFavorite(item) {
                this.setFavorite({
                    song: item,
                    isFavorite: !this.isFavorite(item.id)
                })
            },
            deleteOne(item) {
                console.log(item)
                this.deleteSong(item)
                if (!this.playList.length) {
                    this.hide()
                }
            },
            ...mapActions([
                'deleteSong',
                'clearSongList',
                'setFavorite'
            ])
        },
        watch: {
            showFlag(newValue) {
                if (newValue) {
                    setTimeout(() => {
                        this.$refs.list.refresh()
                        this.scrollToCurrent(this.currentSong)
                    }, REFRESH_TIME)
                }
            }
        },
        components: {
            Scroll,
            Confirm
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
    @import "~common/stylus/mixin"

    .playlist
        position: fixed
        left: 0
        right: 0
        top: 0
        bottom: 0
        z-index: 200
        &.list-fade-enter-active, &.list-fade-leave-active
            transition: opacity .5s
            .list-wrapper
                transition: all .3s
        &.list-fade-enter, &.list-fade-leave-to
            opacity: 0
            .list-wrapper
                transform: translate3d(0, 100%, 0)

        &::before
            content: ''
            position: absolute
            top: 0
            bottom: 0
            left: 0
            right: 0
            opacity: .6
            background-color: $color-background-d
        .list-wrapper
            position: absolute
            left: 0
            bottom: 0
            width: 100%
            background-color: $color-highlight-background
            .list-header
                position: relative
                padding: 17px 25px
                .title
                    display: flex
                    align-items: center
                    height: 26px
                    line-height: 26px
                    border-1px($color-text-ld)
                    .icon
                        margin-right: 10px
                        font-size: 20px
                        font-weight: bold
                        color: $color-text-l
                    .text
                        flex: 1
                        font-size: $font-size-medium-l
                        color: $color-text
                        font-weight: bold
                        extend-click()
                    .clear
                        text-align: right
                        flex: 0 0 30px
                        margin-right: 5px
                        .icon-trash
                            font-size: $font-size-medium
                            color: $color-text-d
            .list-content
                max-height: 350px
                overflow: hidden
                .item
                    position: relative
                    display: flex
                    align-items: center
                    height: 50px
                    line-height: 50px
                    padding: 0 15px
                    border-1px($color-text-ld)
                    overflow: hidden
                    &.list-enter-active, &.list-leave-active
                        transition: all .3s
                    &.list-enter, &.list-leave-to
                        opacity: 0
                        height: 0
                    .desc
                        flex: 1
                        display: flex
                        font-size: $font-size-medium
                        line-height: 20px
                        color: $color-text
                        no-wrap()
                        .text
                            flex: 0 1 auto
                            no-wrap()
                            .singer-name
                                font-size: $font-size-small
                                color: $color-text-d
                        .current
                            flex: none
                            width: 15px
                            margin-left: 5px
                            font-size: $font-size-small
                            color: $color-theme
                            display: none
                        &.playing
                            .text, .text > .singer-name
                                color: $color-theme
                            .current
                                display: inline-block
                    .option
                        padding-left: 7px;
                        .option-item
                            display: inline-block
                            padding-left: 5px
                            font-size: $font-size-medium
                            .icon-full-heart
                                color: #ff7777
                            &.delete
                                color: $color-text-d
            .list-operate
                width: 140px
                margin: 20px auto 30px auto
                padding-bottom: 20px
                .add
                    display: flex
                    align-items: center
                    padding: 8px 16px
                    border: 1px solid $color-text-l
                    border-radius: 100px
                    color: $color-text
                    .icon-add
                        margin-right: 5px
                        font-size: $font-size-small-s
                    .text
                        font-size: $font-size-small
            .list-close
                text-align: center
                line-height: 50px
                background: $color-background
                font-size: $font-size-medium-x
                color: $color-text
</style>
